<template>
  <span>
    <a @click="show = true">{{ title }}</a>
    <el-drawer
      :title="title"
      :visible.sync="show"
      :direction="direction"
      :size="size"
    >
      <Content :pageKey="pageKey" />
    </el-drawer>
  </span>
</template>

<script>
// drawer components
export default {
  name: "DrawerContent",
  props: {
    path: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '原语云文档弹窗'
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    size: {
      type: String,
      default: '65%'
    }
  },
  data () {
    return {
      show: false,
    }
  },

  computed: {

    pageKey: function () {
      // 遍历所有的页面，通过 path 过滤筛选找到 key
      for (var i in this.Pages) {
        if (this.Pages[i].regularPath == this.path) {
          return this.Pages[i].key
        }
      }

      return ''
    }
  }
}
</script>

<style lang="stylus" scoped>
a {
  cursor: pointer;
}
</style>
